Programacion web

¿Qué es CSS?

CSS (Cascading Style Sheets) es un lenguaje usado para definir la apariencia y presentación de documentos estructurados en HTML o XML. Su función principal es separar el contenido (HTML) del diseño visual, permitiendo a los diseñadores controlar con precisión cómo se ven las páginas web. Esto facilita actualizar el estilo de un sitio de forma centralizada y mejora la accesibilidad, ya que los usuarios pueden personalizar su propia hoja de estilo. Además, CSS permite adaptar el diseño según el dispositivo (como móvil o impresión) y hace que el código HTML sea más claro y liviano.

Para que sirve

CSS se utiliza para definir la presentación y el diseño de un documento HTML. Permite separar el contenido de la presentación, lo que facilita la gestión y el mantenimiento de los estilos en una página web. Con CSS, se pueden controlar aspectos como colores, fuentes, espaciado, alineación y disposición de los elementos en la página.

Como se escribe

La sintaxis de CSS se compone de selectores y declaraciones .

• Selector : Es el elemento HTML al que se le aplicarán los estilos. Puede ser una etiqueta, una clase, un identificador o un grupo de elementos.
• Declaraciones : Son las propiedades y valores que se aplican al selector. Cada declaración se compone de una propiedad y un valor, separados por dos puntos. Las declaraciones se encierran entre llaves {}y se separan por punto y coma ;.

Estructura:

Propiedades y Sintaxis de CSS

1. Propiedades: En CSS, una propiedad es un aspecto del estilo que se puede modificar en un elemento HTML, como el color.
2. Valor de la propiedad: Es lo que determina cómo se verá la propiedad en el elemento, por ejemplo, "red" o "#ff0000" para el color.
3. Sintaxis de CSS : Es importante seguir la sintaxis correcta al escribir CSS:
   • Cada regla debe ir entre llaves ( {}).
   • Dentro de cada declaración, usa los dos puntos ( :) para separar la propiedad de su valor.
   • Se coloca el punto y coma ( ;) para separar una declaración de la siguiente.

tipos de selectores en CSS

1. Selector de ID: Selecciona un único elemento en el documento HTML que tiene un atributo id específico. Se utiliza para aplicar estilos a un elemento único, garantizando que solo un elemento en la página tenga ese estilo. Ideal para elementos que requieren un estilo específico y no se repiten.
2. Selector de clase: Selecciona todos los elementos que tienen un atributo class específico. Permite aplicar el mismo estilo a múltiples elementos en la página. Es útil para agrupar elementos similares que comparten características visuales, facilitando la consistencia en el diseño.
3. Selector de Elemento (Nombre Específico): Selecciona todos los elementos de un tipo específico en el documento HTML, como "p", "h1", "ul", etc. Se utiliza para aplicar estilos de manera general a todos los elementos de un tipo determinado, lo que permite una rápida y fácil modificación del diseño de esos elementos en toda la página.

Ejemplo ID

Ejemplo class

Ejemplo especifico